<template>
  <div id="personMessage">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line"><i class="el-icon-menu"></i>基础信息</el-col>
    </el-row>
    <div class="content">
     <div class="back" v-show="tipshow"></div>
      <div class="tip" v-show="tipshow">
        <el-alert
          :title="tip"
          type="error"
          left
          show-icon>
        </el-alert>
      </div>
        <form v-model="form">
            <table class="layui-table">
                              <tbody>
                                  <tr>
                                      <td colspan="2">姓名</td>
                                      <td >
                                        <el-input type="text" v-model="form.name"></el-input>
                                       
                                      </td>
                                      <td colspan="2" width="60px">性别</td>
                                      <td colspan="2">
                                         <el-select v-model="form.sex" placeholder="请选择">
                                            <el-option label="男" value=1></el-option>
                                            <el-option label="女" value=0></el-option>
                                          </el-select>
                                      </td>
                                      <td colspan="2">出生年月</td>
                                      <td colspan="2">
                                        <el-date-picker
                                          v-model="form.birth"
                                          type="date"
                                          placeholder="选择日期"
                                          format="yyyy 年 MM 月 dd 日"
                                          value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                      </td>
                                      <td rowspan="2">
                                          <el-upload
                                            class="avatar-uploader"
                                            action=""
                                            :auto-upload="false"
                                            :show-file-list="false"
                                            :on-change="change"
                                            accept="image/*"
                                            >
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon add-icon"></i>
                                          </el-upload>
                                          <div>一寸照</div>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td colspan="2">政治面貌</td>
                                      <td>
                                        <el-select v-model="form.politics" placeholder="请选择">
                                            <el-option label="党员" value="党员"></el-option>
                                             <el-option label="预备党员" value="预备党员"></el-option>
                                            <el-option label="共青团员" value="共青团员"></el-option>
                                            <el-option label="群众" value="群众"></el-option>
                                        </el-select>
                                      </td>
                                      <td colspan="2">民族</td>
                                      <td colspan="2">
                                        <el-select v-model="form.nation" placeholder="请选择">
                                            <el-option v-for="item in nations" :label="item" :value="item"></el-option>
                                        </el-select>
                                      </td>
                                      <td colspan="2">考生类别</td>
                                      <td colspan="2">
                                        <el-select v-model="form.utype" placeholder="请选择">
                                            <el-option label="应届" value="应届"></el-option>
                                            <el-option label="往届" value="往届"></el-option>
                                        </el-select>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td colspan="2">身份证号</td>
                                      <td colspan="4">
                                        <el-input v-model="form.idnum"></el-input>
                                      </td>
                                       <td colspan="2">生源地</td>
                                      <td colspan="4">
                                        <v-distpicker :province="form.bp_province" :city="form.bp_city" :area="form.bp_area" @selected="onSelected1"></v-distpicker>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td colspan="2">联系电话</td>
                                      <td colspan="4">
                                        <el-input v-model="form.mobile1"></el-input>
                                      </td>
                                      <td colspan="2">备用电话</td>
                                      <td colspan="4">
                                        <el-input v-model="form.mobile2" placeholder="选填"></el-input>
                                      </td>
                                  </tr>                              
                                  <tr>
                                      <td colspan="2">高中信息</td>
                                      <td colspan="4">
                                        <v-distpicker :province="form.high.province" :city="form.high.city" :area="form.high.area" @selected="onSelected2"></v-distpicker>
                                      </td>
                                      <td colspan="5">
                                        <el-input placeholder="学校名称" v-model="form.high.sname" ></el-input>
                                      </td>
                                      <td >
                                         <el-input placeholder="校区（选填）" v-model="form.high.scampus"></el-input>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td colspan="2">家庭地址(邮寄通知书、协议等)</td>
                                      <td colspan="4">
                                          <v-distpicker :province="form.home.province" :city="form.home.city" :area="form.home.area" @selected="onSelected3"></v-distpicker>
                                      </td>
                                      <td colspan="5">
                                        <el-input placeholder="详细地址" v-model="form.home.address"></el-input>
                                      </td>
                                      <td >
                                        <el-input placeholder="邮编" v-model="form.postcode"></el-input>
                                      </td>
                                  </tr>                               
                                  <tr>
                                      <td class="members" :rowspan="rowspan" colspan="2">家庭成员及社会关系</td>
                                      <td colspan="2">称谓</td>
                                      <td colspan="2">姓名</td>
                                      <td colspan="3">联系电话</td>
                                      <td colspan="3">工作单位</td>
                                  </tr>
                                  <template v-for="item in form.families">
                                    <tr class="member" id="test">
                                      <td colspan="2">
                                        <el-input v-model="item.cname"></el-input>
                                      </td>
                                      <td colspan="2">
                                         <el-input v-model="item.name"></el-input>
                                      </td>
                                      <td colspan="3">
                                         <el-input v-model="item.mobile"></el-input>
                                      </td>
                                      <td colspan="3">
                                        <el-input v-model="item.work"></el-input>
                                      </td>
                                  </tr>
                                  </template>
                              </tbody>
            </table>
            <div style="text-align: center;"> 
              <el-button type="primary" @click="add1" style="width:100px;" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">保存</el-button>                         
                
            </div>
        </form>
     
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import _ from 'lodash';
export default {
  
  data () {
    return {
      tipshow:false,
      tip:'无法修改',
      rowspan:6,
      imageUrl: '',
      form:{
        name:'',
        img:'',
        sex:'',
        idnum:'',
        utype:'',
        birth:"",
        politics:'',
        nation:'',
        bp_province:'浙江省',
        bp_city:'杭州市',
        bp_area:'上城区',
        high: { province: '浙江省', city: '杭州市', area: '上城区', sname:'', scampus:'' },
        home: { province: '浙江省', city: '杭州市', area: '上城区', address:''},
        postcode:'',
        mobile1:'',
        mobile2:'',
        families:[
          {
            cname:'',
            name:'',
            mobile:'',
            work:''
          },
          {
            cname:'',
            name:'',
            mobile:'',
            work:''
          },
          {
            cname:'',
            name:'',
            mobile:'',
            work:''
          },
          {
            cname:'',
            name:'',
            mobile:'',
            work:''
          },
        ],
      },
      nations:[
                        "汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族", "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族",
                        "哈萨克族", "黎族", "傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族", "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族", "锡伯族",
                        "柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族", "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族",
                        "俄罗斯族", "裕固族", "乌孜别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
      ],
      file:'',
      fullscreenLoading: false
    }
  },
  components: { VDistpicker },
  mounted(){
    this.fullscreenLoading=true;
    this.getInfo();
  },
  methods:{
    change( file, fileList){
      console.log(file.raw.type);
      const isLt2M = file.raw.size / 1024 / 1024 < 1;
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
          return;
        }
        //return isLt2M;
        this.imageUrl = URL.createObjectURL(file.raw);
        //var file1=document.getElementsByName('file')[0].files[0];
        let fd = new FormData()
        fd.append('file', file.raw)
        this.file=fd;
    },
    getInfo(){
      var that=this;
      this.axios({
        url:this.host+'/3v1t.smserver.cn/index.php/index/student.Aboutbaseinfos/baseinfo',
        method:'post',
        headers:{
              "Content-type":"application/json"
            }
      }).then((res)=>{
        console.log(res);
        that.fullscreenLoading=false;
        that.form.mobile1=res.data.mobile1;
        if(res.data.status==2){
              that.tip=res.data.msg;
              that.tipshow=true;
        }
        if(res.data.data){
          that.form=res.data.data;
          that.imageUrl=res.data.data.img;
        }
      })
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
    },
    addMerInput(){
      this.form.society.push({
            cname:'',
            name:'',
            mobile:'',
            work:''
          })
      this.rowspan+=1;   
    },
    add1(){
      var that=this;
      var message=this.form;
      console.log(message);
      this.fullscreenLoading = true;
      this.axios({
          method: "post",
          url: this.host+'/3v1t.smserver.cn/index.php/student/Aboutbaseinfos/upload',
          data:that.file
      }).then(function (res) {
          //console.log(res);
          if(res.data.url){
            message.img=res.data.url;
          }
          // var tag=true;
          // _.forEach(message, function(value, key) {  
          //     if(value==""){
          //       tag = false;
          //     }
          // });
          // if(!tag){
          //   that.$message({
          //     type:'warning',
          //     message:'表单填写不完整，请检查！'
          //   })
          // }else{
            that.axios({
              url:that.host+'/3v1t.smserver.cn/index.php/index/student.Aboutbaseinfos/modibaseinfo',
              method:'post',
              data:JSON.stringify(message),
              headers:{
                "Content-type":"application/json"
              }
            }).then((res)=>{
              that.fullscreenLoading = false;
              if(res.data.code==1){
                that.$message({
                  type:'success',
                  message:''+res.data.msg
                })
              }else if(res.data.code==2){
                that.$message({
                  type:'warning',
                  message:''+res.data.msg
                })
              }   
            })
          //}
      })
    },
    onSelected1(data){
     // console.log(data)

      this.form.bp_province=data.province.value;
      this.form.bp_city =data.city.value;
      this.form.bp_area=data.area.value;
    },
    onSelected3(data){
      //console.log(data)
      this.form.home.province=data.province.value;
      this.form.home.city =data.city.value;
      this.form.home.area=data.area.value;
       console.log(this.form.home)
    },
    onSelected2(data){
     // console.log(data)
      this.form.high.province=data.province.value;
      this.form.high.city =data.city.value;
      this.form.high.area=data.area.value;
    },
    onSelected(data) {
      alert(data.province + ' | ' + data.city + ' | ' + data.area)
      console.log(data)
    },
    
    
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#personMessage{
  //width:100%;
  //line-height:100%;
  padding:10px;
  .line{
    border-bottom:1px solid #ccc;
    text-align:left;
    height:50px;
    line-height:50px;
    padding-left:10px;
  }
  .content{
    padding:20px;
    text-align:center;
    position:relative;
  }

  select[data-v-a078dc08]{
    font-size:0.8rem;
    padding:0;
  }
  .none{
    display:none;
  }
  .name{
    display:block;
  }
  .add-icon{
    font-weight: 700;
    font-size:20px;
  }
  .tip{
      text-align: left;
    }
    .back{
      height:100%;
      width:100%;
      background:transparent;
      position:absolute;
      top:0;
      left:0;
      right:0;
      z-index:99;
    }
}
</style>
